<div class="paginator">
  <div class="page-size">
    <span>{{ 'Items per page' | translate }}:</span>
    <mat-form-field>
      <mat-select
        ixTest="pageSize"
        tabIndex="0"
        [value]="pageSize()"
        [aria-label]="'Items per page' | translate"
        (selectionChange)="onPageSizeChange($event)"
      >
        @for (option of pageSizeOptions(); track option) {
          <mat-option [value]="option" [ixTest]="['pageSizeOption', option]">
            {{ option }}
          </mat-option>
        }
      </mat-select>
    </mat-form-field>
  </div>
  <span class="pages">
    @if (lastPage() > firstPage()) {
      {{ firstPage() }} – {{ lastPage() }}
    } @else {
      {{ lastPage() }}
    }
    {{ 'of' | translate }} {{ totalItems() }}
  </span>
  <div class="buttons">
    <button
      mat-icon-button
      ixTest="max-left"
      [disabled]="currentPage() === 1"
      [attr.aria-label]="'First Page' | translate"
      (click)="goToPage(1)"
    >
      <ix-icon name="first_page"></ix-icon>
    </button>
    <button
      mat-icon-button
      ixTest="left"
      [disabled]="currentPage() === 1"
      [attr.aria-label]="'Previous Page' | translate"
      (click)="previousPage()"
    >
      <ix-icon name="mdi-chevron-left"></ix-icon>
    </button>
    <button
      mat-icon-button
      ixTest="right"
      [attr.aria-label]="'Next Page' | translate"
      [disabled]="currentPage() === totalPages() || !totalPages()"
      (click)="nextPage()"
    >
      <ix-icon name="mdi-chevron-right"></ix-icon>
    </button>
    <button
      mat-icon-button
      ixTest="max-right"
      [attr.aria-label]="'Last Page' | translate"
      [disabled]="currentPage() === totalPages() || !totalPages()"
      (click)="goToPage(totalPages())"
    >
      <ix-icon name="last_page"></ix-icon>
    </button>
  </div>
</div>
